import {view, View, binder} from "adajs";
import SlideService from "./state.js";
import Touch from "./../../lib/touch";
import Transform from "./../../lib/transform";
import Transition from "./../../lib/transition";
import User from "./../../lib/user";

@view({
    className: "slide",
    template: "./template.html",
    style: "./style.scss",
    dataset: {
        service: SlideService
    }
})
class Slide extends View {
    oncreated() {
        this.postion = 0;
        this.current = 0;
        this.currentNum = 0;
        this.outer = false;
        this.transform = null;
        this.transition = null;
        this.timeInterval = null;
        this.startAutoSlide();
    }

    onready() {
        this.commit("load").then(() => {
            let tabs = this.getCurrentState().tabs;
            this.content = this.finder('content').getElement();
            let transform = new Transform(this.content),
                transition = new Transition(this.content);
            this.transform = transform;
            this.transition = transition;
            new Touch(this.content, (element, e) => {
                if (e.action === "down") {
                    this.stopAutoSlide();
                    this.position = transform.x();
                    transition.clean();
                } else if (e.action === "move") {
                    if (e.direction === "left" || e.direction === "right") {
                        let a = this.position + e.offsetX;
                        if (a <= 0 && a > -(tabs.length - 1) * this.getElement().offsetWidth) {
                            this.outer = false;
                            transform.x(a);
                            e.preventDefault();
                            e.stopPropagation();
                        } else {
                            this.outer = true;
                        }
                    }
                } else {
                    let v = Math.abs(e.offsetX / e.timeLast);
                    if (e.odirection === "left" || e.odirection === "right") {
                        if (v > 0.3 && v < 1) {
                            if (e.odirection === "left") {
                                this.nextTab();
                            } else if (e.odirection === "right") {
                                this.prevTab();
                            }
                        } else {
                            if (e.direction === "left") {
                                if (Math.abs(e.offsetX) > 100) {
                                    this.nextTab();
                                } else {
                                    this.gotoTab(this.currentNum);
                                }
                            } else if (e.direction === "right") {
                                if (Math.abs(e.offsetX) > 100) {
                                    this.prevTab();
                                } else {
                                    this.gotoTab(this.currentNum);
                                }
                            }
                        }
                    }
                    this.startAutoSlide();
                }
            });
        });
    }

    gotoTab(num) {
        let tabs = this.getCurrentState().tabs;
        num = num / 1;
        if (num < 0) {
            num = 0;
        }
        if (num >= tabs.length) {
            num = 0;
        }
        if (num >= 0 && num < tabs.length) {
            this.currentNum = num;
            let a = num * this.getElement().offsetWidth;
            this.transition.set("-all-transform");
            this.transform.x(-a);
            let dots = [...this.finder('dots').getElement().children];
            dots.forEach(ele => ele.classList.remove(this.getElementClassName('active')));
            dots[num].classList.add(this.getElementClassName('active'));
        }
    }

    nextTab() {
        this.gotoTab(this.currentNum + 1);
    }

    prevTab() {
        this.gotoTab(this.currentNum - 1);
    }

    startAutoSlide() {
        this.timeInterval = setInterval(() => {
            this.nextTab();
        }, 5000);
    }

    stopAutoSlide() {
        clearInterval(this.timeInterval);
    }

    @binder("openNews")
    openNews({tab}) {
        this.dispatchEvent("gotoPage", `/${User.isAdmin() ? 'admin' : 'my'}/news/detail?id=${tab.id}`)
    }

    onunload() {
        this.stopAutoSlide();
    }
}

export default Slide;